<template>
	<view class="fond-good-box flex f-d-c">
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				标题
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="title" placeholder="请输入需求标题" placeholder-class="color-999"/>
				</view>
			</view>
		</view>
		<!-- <view class="form-item flex a-i-c j-c-b" @click="chooseType">
			<view class="left color-333 f-s-24">
				发布类型
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" :disabled="true" v-model="type_name" placeholder="请选择发布类型" placeholder-class="color-999"/>
				</view>
			</view>
		</view> -->
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				姓名
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="name" placeholder="请输入您的姓名" placeholder-class="color-999"/>
				</view>
			</view>
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				联系电话
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="number" v-model="mobile" placeholder="请输入您的联系电话" placeholder-class="color-999"/>
				</view>
			</view>
		</view>
		<picker mode="selector" :range="send_car_mode" range-key="name" @change="changeClassName">
			<view class="form-item flex a-i-c j-c-b">
				<view class="left color-333 f-s-24">
					分类
				</view>
				<view class="right">
					<view class="box1 w-100 flex a-i-c j-c-b">
						<input class="f-s-24 input" type="text" :disabled="true" v-model="class_name" placeholder="请选择车辆分类" placeholder-class="color-999"/>
					</view>
				</view> 
			</view>
		</picker>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				品牌
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="brand" placeholder="请输入您需要的车辆品牌" placeholder-class="color-999"/>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				型号
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="model" placeholder="请输入您需要的车辆型号" placeholder-class="color-999"/>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				车龄
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="age" placeholder="请输入您要找的车辆车龄 例：2023年" placeholder-class="color-999"/>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				里程
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="mileage" placeholder="请输入您要找的车辆里程" placeholder-class="color-999"/>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				最低售价
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="first_price" placeholder="请选择您的预算,单位万" placeholder-class="color-999"/>
					<image class="form-next-icon" src="@/static/images/form-next.svg" mode=""></image>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				最高售价
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="last_price" placeholder="请选择您的预算,单位万" placeholder-class="color-999"/>
					<image class="form-next-icon" src="@/static/images/form-next.svg" mode=""></image>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				上传车辆照片
			</view>
			<view class="right"></view> 
		</view>
		<view class="upload-form flex f-w-w">
			<block v-for="(item, index) in images" :key="index">
				<upload-box :current="index" :src="item" @del="delImage" @success="uploadSuccess"></upload-box>
			</block>
			<upload-box current="" src="" @success="uploadSuccess"></upload-box>
		</view>
		<bottom-btn :positon="false" btnType="2" @click="requestData">确认发布</bottom-btn>
	</view>
</template>

<script>
	import uploadBox from "@/components/myComponents/uploadBox.vue"
	import bottomBtn from "@/components/myComponents/bottomBtn.vue"
	import {mapState} from "vuex"
	import {goTo,reditTo} from "@/nav.js"
	export default {
		name:"sellingCarsBox",
		components:{
			"upload-box":uploadBox,
			"bottom-btn":bottomBtn
		},
		data() {
			return {
				name:"",
				mobile:"",
				brand:"",
				model:"",
				age:"",
				mileage:"",
				first_price:"",
				last_price:"",
				images:[],
				lng:'',
				lat:'',
				title:"",
				class:"",
				class_name:"",
				is_post:"",
				type_name:"买车",
				type:1,
				id:""
			};
		},
		computed:{
			...mapState(['send_car_mode'])
		},
		mounted() {
			this.getLocationThis()
			this.setPageData()
			console.log(this.send_car_mode)
		},
		methods:{
			setPageData(){
				let str = this.$store.state.page_tab_info
				let item = {}
				if(!!str){
					item = JSON.parse(str)
					Object.keys(item).map(val=>{
						this[val] = item[val]
					})
					for(let key of this.send_car_mode){
						if(key.id == item.class){
							this.class_name = key.name
						}
					}
				}
			},
			changeClassName(e){
				console.log(e)
				let index = e.detail.value
				this.class_name = this.send_car_mode[index].name
				this.class = this.send_car_mode[index]
			},
			delImage(e){
				this.images.splice(e,1)
			},
			uploadSuccess(e){
				let {index,url} = e
				if(index === ''){
					this.images.push(url)
				}else{
					this.images.splice(index,1,url)
				}
			},
			requestData(){
				if(this.title === ""){
					uni.showToast({
						title:"请输入标题",
						icon:"none"
					})
					return
				}
				if(this.name === ""){
					uni.showToast({
						title:"请输入姓名",
						icon:"none"
					})
					return
				}
				if(this.mobile === "" && this.mobile.length !== 11){
					uni.showToast({
						title:"输入手机号码不正确",
						icon:"none"
					})
					return
				}
				if(this.class_name === ""){
					uni.showToast({
						title:"请选择车辆分类",
						icon:"none"
					})
					return
				}
				if(this.brand === ""){
					uni.showToast({
						title:"请输入车辆品牌",
						icon:"none"
					})
					return
				}
				if(this.model === ""){
					uni.showToast({
						title:"请输入车辆型号",
						icon:"none"
					})
					return
				}
				if(this.age === ""){
					uni.showToast({
						title:"请输入车龄",
						icon:"none"
					})
					return
				}
				if(this.mileage === ""){
					uni.showToast({
						title:"请输入里程",
						icon:"none"
					})
					return
				}
				if(this.first_price === ""){
					uni.showToast({
						title:"请输入最低价格区间",
						icon:"none"
					})
					return
				}
				if(this.images.length<=0){
					uni.showToast({
						title:"请上传车辆照片",
						icon:"none"
					})
					return
				}
				this.postSellingCar()
			},
			getLocationThis(){
				let that = this
				uni.showLoading({
					title:"定位中..."
				})
				that.$location.myGetLocation((res)=>{
					uni.hideLoading()
					that.lng = res.lng
					that.lat = res.lat
				},false)
			},
			postSellingCar(){
				let that = this
				// return
				if(that.is_post !== ''){
					return
				}
				uni.showLoading({
					title:"提交中..."
				})
				that.is_post = '1'
				that.util.postRequest({
					url:"v1/content/lorry_edit",
					data:{
						title:that.title,
						name:that.name,
						mobile:that.mobile,
						class:that.class.id,
						brand:that.brand,
						model:that.model,
						age:that.age,
						mileage:that.mileage,
						first_price:that.first_price,
						last_price:that.last_price,
						images:that.images,
						lng:that.lng,
						lat:that.lat,
						type:1,
					}
				}).then(res=>{
					uni.hideLoading()
					console.log(res)
					that.is_post=""
					// reditTo({url:'/pages/success/successPage'})
					uni.showToast({
						title:"待审核",
						duration:2500
					})
					// let timeout = setTimeout(()=>{
					// 	clearTimeout(timeout)
					// 	uni.navigateBack()
					// },2500)
				}).catch(e=>{
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fond-good-box{
		width: 100%;
		border-radius: 20upx;
		background-color: #FFFFFF;
		padding: 30upx;
		.upload-form{}
		.form-item{
			width: 100%;
			padding: 0 16upx;
			min-height: 80upx;
			.right{
				width: 430upx;
				.box1{
					.input{
						width: 380upx;
					}
				}
				.box2{
					.title{
						margin-bottom: 26upx;
						line-height: 50upx;
					}
				}
			}
			.left{
				line-height: 50upx;
			}
		}
	}
	.form-next-icon{
		width: 26upx;
		height: 26upx;
	}
	
</style>